<template>
	

	<div class='icons'>

		<swiper :options="swiperOption">

			<swiper-slide v-for='page in page'>

					<div class='icon' v-for='(item,index) in page' :key='item.id'>
						<img :src="item.imgUrl">
						<p>{{item.title}}</p>
					</div>

			</swiper-slide>

		</swiper>

	</div>

</template>

<script type="text/javascript">
export default {
	props:['iconsList'],
	computed:{
		page () {

			const pages = [];

			this.iconsList.forEach( (item,index)=>{

				const idx = Math.floor(index/8)

				if(!pages[idx]) pages[idx]=[]

				pages[idx].push(item)

			})

			return pages;

		}
	},
	data () {

		return {
			swiperOption: {},
			
		}

	}

}
</script>

<style type="text/css" lang="stylus" scoped>
@import '~css/var.styl'
.icons{
	overflow: hidden;
	height: 0;
	background: #fff;
	padding-bottom:50%;
}	
.icon{
	width:25%;
	padding-bottom:25%;
	float: left;
	position: relative;
}
.icon img{
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:.44rem;
	width: 1.1rem;
    height: 1.1rem;
    margin:.2rem auto;
}

.icon p{
	font-size:.28rem;
	position: absolute;
	left:0;
	right:0;
	bottom:.24rem;
	line-height: .24rem;
	text-align: center;
	handel();
}

</style>